<template>
  <div class="item-cont item-table">
    <div class="thead flex-cb">
      <div
        class="td"
        :style="{ width: 100 / (attrTitleData.length + 3) + '%' }"
      >
        序号
      </div>
      <div
        class="td"
        :style="{ width: 100 / (attrTitleData.length + 3) + '%' }"
      >
        设备名称
      </div>
      <div
        class="td"
        :style="{ width: 100 / (attrTitleData.length + 3) + '%' }"
        v-for="ele in attrTitleData"
      >
        {{ ele }}
      </div>
      <div
        class="td"
        :style="{ width: 100 / (attrTitleData.length + 3) + '%' }"
      >
        时间
      </div>
    </div>
    <div class="tbody">
      <vue3-seamless-scroll :list="echartData" :step="0.5" :hover="true">
        <ul class="scroll">
          <li v-for="(item, index) in echartData" :key="index" class="flex-cb">
            <div
              class="td"
              :style="{ width: 100 / (attrTitleData.length + 3) + '%' }"
            >
              {{ index + 1 }}
            </div>
            <div
              class="td"
              :style="{ width: 100 / (attrTitleData.length + 3) + '%' }"
            >
              {{
                item.pointName.length > 5
                  ? item.pointName.substr(0, 5) + "."
                  : item.pointName
              }}
            </div>
            <div
              class="td"
              :style="{ width: 100 / (attrTitleData.length + 3) + '%' }"
              v-for="(ele, index) in attrTitleData"
            >
              {{ item["attr" + index] }}
            </div>
            <div
              class="td"
              :style="{ width: 100 / (attrTitleData.length + 3) + '%' }"
            >
              {{ moment(item.updateTime).format("YYYY-MM-DD HH:MM") }}
            </div>
          </li>
        </ul>
      </vue3-seamless-scroll>
    </div>
    <div class="box">
      <div>
        <p>
          <box-icon
            color="#ffbf60"
            size="20px"
            name="sort-up"
            class="v-top"
          />最大{{attrTitleData[0]?attrTitleData[0]:'属性'}}
        </p>
        <p>{{maxP?maxP:'-'}}</p>
      </div>
      <div>
        <p>
          <box-icon
            color="#ffbf60"
            size="20px"
            name="sort-down"
            class="v-top"
          />最小{{attrTitleData[0]?attrTitleData[0]:'属性'}}
        </p>
        <p>{{minP?minP:'-'}}</p>
      </div>
      <div>
        <p>
          <box-icon color="#ffbf60" size="20px" name="transfer" class="v-top" />
          平均{{attrTitleData[0]?attrTitleData[0]:'属性'}}
        </p>
        <p>{{aveP?aveP:'-'}}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import moment from "moment";
import { find } from "lodash";
import GisPointInfoAPI from "@/api/GisPointInfoAPI";
import DeviceCategoryApi from "@/api/DeviceCategoryApi";
import DashboardAPI from "@/api/DashboardAPI";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
let echartData = ref([]);
const colAttribute = ref([]);
const attrTitleData = ref([]);
const maxP = ref("");
const minP = ref("");
const aveP = ref("");
const AttrList =ref([])
const pressureData = ref([]);

function defaultOption() {
  return {
    step: 0.2, // 数值越大速度滚动越快
    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
    hoverStop: true, // 是否开启鼠标悬停stop
    direction: 1, // 0向下 1向上 2向左 3向右
    openWatch: true, // 开启数据实时监控刷新dom
    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
    waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
  };
}

// 查询
function f_Query(classId) {
  attrTitleData.value = [];
  let params = {
    pageIndex: 1,
    pageSize: 100,
    classId: classId,
  };
  GisPointInfoAPI.api_query_device_status_receivejson(params).then(
    ({ data }) => {
      echartData.value = data.items;

      echartData.value.forEach((ele, index) => {
        let num = 0;
        colAttribute.value.forEach((item) => {
          if (item.IsShow) {
            if (!index) {
              attrTitleData.value.push(item.AttrName);
            }
            if (ele.receiveJson) {
              echartData.value[index]["attr" + num] = JSON.parse(
                ele.receiveJson
              )[item.AttrKey];
            } else {
              echartData.value[index]["attr" + num] = "";
            }

            num++;
          }
        });
      });
	AttrList.value=[]
	echartData.value.forEach(function(item){
		if(item.attr0){
			if(!isNaN(item.attr0)){
				AttrList.value.push(Number(item.attr0))
			}
		}
	})
	if(AttrList.value.length>0){
		maxP.value=Math.max(...AttrList.value)
		minP.value=Math.min(...AttrList.value)
		aveP.value=(AttrList.value.reduce((acc, val) => acc + val, 0)/AttrList.value.length).toFixed(2)
	}
	
      console.log('333:'+attrTitleData.value);
	  console.log(echartData.value)
    }
  );
}

// 查询
function f_HandelQueryPoint() {
  const params1 = {
    pageSize: 100,
    pageIndex: 1,
    pClassId: "01",
    isCollection: true,
  };
  DeviceCategoryApi.api_query(params1).then(({ data, errors, succeeded }) => {
    if (succeeded) {
      let tempData = data.items;
      tempData.forEach((item) => {
        if (item.showModule == "Pipe") {
          if (item.colAttribute) {
            colAttribute.value = item.colAttribute;
          }
          f_Query(item.classId);
        }
      });
    }
  });
}

onMounted(() => {
  f_HandelQueryPoint();
});
</script>
<style lang="scss" scoped>
.item-table {
  height: 20vh;
  margin-top: 1vh;
  background: transparent !important;

  .td {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    float: left;
    height: 3.1vh;
    font-size: 1vh;
    color: #d7e5ff;
    text-align: center;
    text-align: left;
  }
  // .td:nth-child(1) {
  //   width: 10%;
  // }

  .thead {
    font-size: 1.2vh;
    color: #839ecb;
    background: rgba(#0e3469, 0.7);
  }

  .tbody {
    width: 100%;
    height: 16vh;
    overflow: hidden;
    background: transparent !important;

    td {
      color: #82bfff !important;
    }
  }

  .box {
    display: flex;
    margin-top: 1vh;

    div {
      flex: 1;
    }

    p {
      height: 2vh;
      font-size: 1.3vh;
      line-height: 2vh;
      text-align: center;
    }

    img {
      height: 2vh;
      vertical-align: sub;
    }
  }
}
</style>
